// pages/college/college.js
// 这是逻辑
// 获取全局的app
const app = getApp()
console.log(app.test())
// 引入接口文件
const Api = require('../../utils/api.js')

/*** 需求实现：功能/性能
  * ----功能----
  * 1.获取学院 getCollege方法
  * 2.获取专业 getMajor 方法
  * 3.实现点击学院，显示出当前学院的专业
  *
  * ----性能------
  * 4.性能优化： 缓存已经点过的学院下的专业，防止再次网络请求浪费带宽, 造成等待
  *
  */
Page({

	/**
	 * 页面的初始数据
	 */
	data: {
		college_id: 1, // 还不知道是多少。默认给1
		index: 0, // 要在没有点击之前 给个默认值，第一个的下标
	},

	/**
	 * 生命周期函数--监听页面加载
	 * 这个方法会在页面打开的时候自动调用
	 * 可以在这个方法里调用其它方法
	 */
	onLoad: function (options) {
		this.getCollege()
	},


	// 声明获取学院的方法
	getCollege: function () {
		app.get(Api.college).then(res => {
			// res 就是拿到的学院数据
			console.log(res) // 打印
			console.log(res.length)
			// 声明了之后别忘了调用
			// res 正常了，就把它绑定到data，用setData方法
			this.setData({
				college: res,
				// 可以取第一个学院的id
				college_id: res[0].id,
				// 存专业的容器
				majors: Array(res.length).fill([]),
        // 存储点击状态
        majorState: Array(res.length).fill(false)
			})
			// 绑定之后 可以在控制台的appData选项卡里看到页面的数据 就是data
			// 之后 打开college.wxml，写渲染代码

			// 这里调用，已经知道了学院
			this.getMajor()
		})
	},
	// 声明获取专业的方法, 这个方法要在知道学院之后才能调用，同步操作
	// 
	getMajor() {
		// 这里就能拿到index了，然后怎么判断是请求过了呢
		// 一般来说，是判断那个下标对应的容器里有没有数据，就是 length > 0
    // 但是，假如一开始 取到的就是空的呢，下一次不就又请求了，所以我上面说“一般来说”，
    // 其实这里已经可以了，因为实际情况专业不可能是空的，要是真有这种空的情况，那就要用状态了，
    // 这个状态可以这样定义: 先默认他没有点 就是false,点了 就是true

		// 获取到majors容器 和下标
		var majors = this.data.majors
		var index = this.data.index
    var majorState = this.data.majorState
		// 没有值的时候 就做网络请求
    // if (majors[index].length === 0) {
    // 这里就通过状态来判断了，就不通过有没有值
    if (!majorState[index]) { // majorState[index] === false ， 取反 !majorState[index]
			app.get(Api.major, {
				// 专业需要知道是哪个学院下的专业，传一个参数
				college_id: this.data.college_id // 从全局变量data里取出来
			}).then(res => {
				console.log(res) // 打印
				// 赋值操作 就是存
				majors[index] = res
        // 改点击状态
        majorState[index] = true
				// 绑定到data
				this.setData({
					major: res,
					majors: majors,
				})

			})
		} else {
      // 有值的时候，从值里面取
      this.setData({
        major: majors[index]
      })
    }
	},

	// 处理学院点击事件的函数
	handleCollegeChangeFunc: function (event) {
		console.log('当前点击组件的college_id: ', event.currentTarget.dataset.id)
		console.log('当前点击组件的index: ', event.currentTarget.dataset.index)
		// 把它绑定到data上去
		// 但是 我们要做一个判断，如果当前点击的学院和上一次的学院一样，就不做操作了, 反过来，就是不一样的时候做操作
    var index = event.currentTarget.dataset.index
    var college_id = event.currentTarget.dataset.id
		if ( college_id !== this.data.college_id) {
      // 点了之后改为true, 但是不能在这里改，因为不知道请求是否成功了， 请求成功就在getMajorl里就知道了，下面调用了
      // majorState[index] = true
			this.setData({
				college_id: college_id,
				index: index // 存起来,
			}, _ => {
				// 再获取当前点击的学院下的专业，有没有觉得这个college_id就关联上了
				// 在这里获取的专业，专业数据在getMarjor方法里
				this.getMajor()
			})
		}
	},

  ////////// 下面的代码暂时没用到 ///////////////

	/**
	 * 生命周期函数--监听页面初次渲染完成
	 */
	onReady: function () {

	},

	/**
	 * 生命周期函数--监听页面显示
	 */
	onShow: function () {

	},

	/**
	 * 生命周期函数--监听页面隐藏
	 */
	onHide: function () {

	},

	/**
	 * 生命周期函数--监听页面卸载
	 */
	onUnload: function () {

	},

	/**
	 * 页面相关事件处理函数--监听用户下拉动作
	 */
	onPullDownRefresh: function () {

	},

	/**
	 * 页面上拉触底事件的处理函数
	 */
	onReachBottom: function () {

	},

	/**
	 * 用户点击右上角分享
	 */
	onShareAppMessage: function () {

	}
})